<template>
  <div>
    选择要保留的值<br />
    <a-radio-group v-model="value" @change="onChange">
      <a-radio :style="radioStyle" value="="> Null值 </a-radio>
      <a-radio :style="radioStyle" value="<>"> 非Null值 </a-radio>
    </a-radio-group>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { IColumn, IKeyValueStore } from '@/store/modules/dataview'
import { StatisticsAction } from '@/util/data-selection-actions'

@Component
export default class FilterNullValue extends Vue {
  @Prop() column!: IColumn
  @Prop() editData!: any
  @Prop({ default: false }) isEdit!: boolean
  @Prop({ default: '' }) parentTableName!: boolean
  private value = '<>'
  private radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px',
  }

  mounted() {
    this.onChange()
  }

  @Watch('editData', { immediate: true, deep: true })
  private onCurrentHistory(newValue: IKeyValueStore) {
    if (!newValue || !this.isEdit) {
      return
    }
    const history = newValue.data
    if (
      history.actionType === StatisticsAction.filterNull &&
      history.filter[0][0].col === this.column.name
    ) {
      const data = history.filter[0][0]
      this.value = data.filterType
    }
  }

  private onChange() {
    this.$emit('on-filter-params-change', {
      data: {
        action: 'FILTER',
        col: this.column.name,
        filter: [
          // 抛出最终用于筛选的选项值
          [
            {
              col: this.column.name,
              filterType: this.value,
              values: ['#NULL'],
            },
          ],
        ],
        description: `只保留${this.value === '=' ? 'Null值' : '非Null值'}`,
        actionType: StatisticsAction.filterNull,
      },
    })
  }
}
</script>
